<template>
  <div>

		<div v-if="!!flowType && !!dataId">
			<flowCheckHistory :flowType="flowType" :dataId="dataId"/>
		</div>
    <div class="flex justify-center align-center">
      <el-button
        icon="el-icon-back" @click.native="back"
      >{{ backBtnText }}
      </el-button>
      <el-button
        v-show="!onlyShowBack && ((!!isApplyer && (flowStatus===0 || flowStatus===2 || flowStatus===5)) || !!isNewData)"
        type="primary" icon="el-icon-circle-plus" @click.native="submit"
      >{{ submitBtnText }}
      </el-button>
      <el-button
        v-show="!onlyShowBack && ((!!isApplyer && (flowStatus===0 || flowStatus===2 || flowStatus===5)) || !!isNewData)"
        type="primary" icon="el-icon-circle-plus-outline" @click.native="save"
      >{{ saveBtnText }}
      </el-button>
      <el-button v-show="!onlyShowBack && (!!canCheck && (flowStatus===3))"
                 type="success" icon="el-icon-success" @click.native="pass"
      >{{ passBtnText }}
      </el-button>
      <el-button v-show="!onlyShowBack && (!!canCheck && (flowStatus===3))"
                 type="danger" icon="el-icon-error" @click.native="returnBack"
      >{{ returnBackBtnText }}
      </el-button>
      <el-button v-show="!onlyShowBack && (!!isApplyer && (flowStatus===0 || flowStatus===2) && !isNewData)"
                 type="danger" icon="el-icon-circle-close" @click.native="del"
      >{{ deleteBtnText }}
      </el-button>
      <el-button v-show="!onlyShowBack && (!!isApplyer && (flowStatus===5))"
                 type="danger" icon="el-icon-circle-close" @click.native="actDel"
      >{{ actualDeleteBtnText }}
      </el-button>
    </div>

    <el-dialog title="审批意见" :visible.sync="dialogFormVisible" width="500px" append-to-body @close="closeOpinionDialog">
      <el-form :model="form">
        <el-form-item label-width="0">
          <el-input v-model="form.opinion" type="textarea" :rows="5"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="dialogFormVisible = false">取消</el-button>
        <el-button :type="form.type===1?'primary':'danger'" @click.native="confirmDialog">
          {{ form.type === 1 ? dialogConfirmPassBtnText : dialogConfirmReturnBackBtnText }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import common from '@/utils/common.js'
import flowCheckHistory from '@/components/FlowCheckHistory'
export default {
  name: 'FlowBtnRow',
  props: {
		flowType: { // 流程类型
			type: Number,
			default: null
		},
		dataId: { // 数据id
			type: Number,
			default: null
		},
    flowStatus: { // 流程状态
      type: Number,
      default: -1
    },
    canCheck: { // 当前人是否可审核
      type: Boolean,
      default: false
    },
    isApplyer: { // 当前人是否为提交人
      type: Boolean,
      default: false
    },
    isNewData: { // 是新数据，即肯定显示保存、提交
      type: Boolean,
      default: false
    },
    onlyShowBack: { // 仅显示返回按钮
      type: Boolean,
      default: false
    },
    isConfirm: {
      type: Boolean,
      default: true
    },
    formName: { // form表单ref。传入值后，会在保存、提交前，进行表单校验
      type: String,
      default: ''
    },
    backBtnText: { // 返回按钮文本
      type: String,
      default: '返回'
    },
    submitBtnText: { // 提交按钮文本
      type: String,
      default: '提交'
    },
    saveBtnText: { // 保存按钮文本
      type: String,
      default: '保存'
    },
    passBtnText: { // 通过按钮文本
      type: String,
      default: '通过'
    },
    returnBackBtnText: { // 驳回按钮文本
      type: String,
      default: '驳回'
    },
    deleteBtnText: { // 删除按钮文本
      type: String,
      default: '删除'
    },
    actualDeleteBtnText: { // 彻底删除按钮文本
      type: String,
      default: '彻底删除'
    },
    dialogConfirmPassBtnText: { // 意见弹框，通过按钮文本
      type: String,
      default: '通过'
    },
    dialogConfirmReturnBackBtnText: { // 意见弹框，驳回按钮文本
      type: String,
      default: '驳回'
    }
  },
	components: { flowCheckHistory },
  data() {
    return {
      dialogFormVisible: false,
      form: {
        type: 1, // 1通过，2驳回
        opinion: ''
      }
    }
  },
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    closeOpinionDialog() {
      this.form = {
        type: 1,
        opinion: ''
      }
    },
    back() {
      // this.$router.go(-1)
      this.$store.dispatch('tagsView/closeCurPage')
    },
    async submit() {
      if (this.formName) {
        let flag = false
        this.$parent.$refs[this.formName].validate((valid) => {
          if (valid) {
            flag = true
          }
        })
        if (flag) {
          const confirm = await common.confirmDialog('您确定要提交?')
          if (confirm) this.$emit('submit')
        }
      } else {
        if (this.isConfirm) {
          const confirm = await common.confirmDialog('您确定要提交?')
          if (confirm) this.$emit('submit')
        } else this.$emit('submit')
      }
    },
    async save() {
      if (this.formName) {
        let flag = false
        this.$parent.$refs[this.formName].validate((valid) => {
          if (valid) {
            flag = true
          }
        })
        if (flag) {
          const confirm = await common.confirmDialog('您确定要保存?')
          if (confirm) this.$emit('save')
        }
      } else {
        if (this.isConfirm) {
          const confirm = await common.confirmDialog('您确定要保存?')
          if (confirm) this.$emit('save')
        } else this.$emit('save')
      }
    },
    pass() {
      this.form.type = 1
      this.dialogFormVisible = true
    },
    returnBack() {
      this.form.type = 2
      this.dialogFormVisible = true
      // this.$emit('returnBack')
    },
    confirmDialog() {
      const opinion = JSON.parse(JSON.stringify(this.form.opinion || ''))
      if (this.form.type === 1) this.$emit('pass', opinion)
      if (this.form.type === 2) this.$emit('returnBack', opinion)
      this.dialogFormVisible = false
    },
    async del() {
      const confirm = await common.confirmDialog('您确定要删除?')
      if (confirm) this.$emit('delete')
    },
    async actDel() {
      const confirm = await common.confirmDialog('您确定要彻底删除?')
      if (confirm) this.$emit('actualDelete')
    }
  }
}
</script>

<style>
</style>
